<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style media="screen">
      .wrapper{
        height: 100%;
        background-color: #fff;
      }
      .form-wrapper{
        padding-left: 0.12rem;
        font-size: 0.14rem;
      }
      .form-row{
        border-bottom: 0.01rem solid #eee;
        height: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .form-label{
        color: #83889A;
      }
      .form-input{
        color: #26344C;
        text-align: right;
        border: 0;
        padding-right: 0.12rem;
        font-size: .14rem;
        height: 100%;
      }
      .btn-wrapper{
        margin-top: 1.32rem;
        text-align: center;
      }
      .btn-start{
        height: 0.45rem;
        width: 2.97rem;
        text-align: center;
        color: #fff;
        background-color: #4E81FB;
        border-radius: 0.28rem;
        font-size: .15rem;
        border: 0;
      }
      .form-select{
        color: #C4C5CE;
        padding-right: .12rem;
        color: #848484;
      }
    </style>
</head>
<body>
  <div class="wrapper">
    <div class="form-wrapper">
      <div class="form-row">
        <div class="form-label">姓氏</div>
        <div class="input-content">
          <input type="text" class="form-input" placeholder="请输入您的姓氏">
        </div>
      </div>
      <div class="form-row">
        <div class="form-label">名字</div>
        <div class="input-content">
          <input type="text" class="form-input" placeholder="必填">
        </div>
      </div>
      <div class="form-row">
        <div class="form-label">性别</div>
        <div class="input-content" onclick="changeSex()">
          <div class="form-select" id="sex">必填</div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-label">年龄</div>
        <div class="input-content">
          <input type="text" class="form-input" placeholder="必填">
        </div>
      </div>
    </div>
  </div>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common/common.js"></script>
<script type="text/javascript">

  var formData = {
    familyName: '',
    firstName: '',
    sex: '',
    age: '',
  }

  function changeSex () {
    api.actionSheet({
        title: '选择性别',
        cancelTitle: '取消',
        buttons: ['男','女']
    }, function(ret, err){
        if( ret ){
             if (ret.buttonIndex == 1) {
               $api.text($api.byId('sex'), '男');
               formData.sex = 1
             } else if (ret.buttonIndex == 2){
               $api.text($api.byId('sex'), '女');
               formData.sex = 2
             }
        }else{
             alert( JSON.stringify( err ) );
        }
    });
  }

</script>
</body>
</html>
